<template>
  <div id="forget">
    <div class="main">
      <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
        <div class="title">
          忘记密码
        </div>
        <el-form-item label="" prop="account" style="margin-left: 0px;" label-width="0">
          <el-input v-model="ruleForm.account" placeholder="请输入用户名" style="margin-left: 0px"></el-input>
        </el-form-item>
        <el-form-item label="" prop="tel" label-width="0">
          <el-input v-model="ruleForm.tel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="" prop="code" label-width="0" >
          <div class="flex-layout align-center">
            <el-input v-model="ruleForm.code" placeholder="请输入联系电话" style="width: 49%"></el-input>
            <div style="height: 40px">
              <img src="http://127.0.0.1:8080/getVerify" style="height: 40px;">
            </div>
          </div>
        </el-form-item>
        <el-button type="primary" size="medium" style="width: 100%;margin: 10px 0;" @click="forgetPass">确认重置</el-button>
        <div class="link">
          <el-link href="http://localhost:5000/#/login" target="_self">登录账号</el-link>
          <el-divider direction="vertical" class="height-per-100"></el-divider>
          <el-link href="http://localhost:5000/#/register" target="_self">注册账号</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Forget',
  data () {
    return {
      labelPosition: 'left', // 设置标签位置
      ruleForm: {
        account: '', // 账号
        tel: '', // 联系电话
        code: '' // 设置验证码
      },
      rules: {
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ],
        tel: [
          {required: true, message: '联系电话不能为空', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 表单信息提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 表单信息重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 点击登录的按钮
    login () {
      this.$axios.get('/user/login', {
        params: {
          account: this.ruleForm.account,
          password: this.ruleForm.password
        }
      }).then(response => {
        if (response.data.uName !== '' && response.data.uName !== null) {
          this.$message({
            message: response.data.uName + ' 用户，欢迎使用本系统，稍后将跳转到首页',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push('/')
          }, 2000)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 跳转注册页面
    toRegister () {
      this.$router.push('/register')
    },
    // 跳转往
    forgetPass () {
      this.$axios.get('/user/forget', {
        params: {
          code: this.ruleForm.code,
          name: this.ruleForm.account,
          tel: this.ruleForm.tel
        }
      }).then(response => {
        if (response.data.message === '用户信息不存在') {
          this.$message.error(response.data)
        } else {
          this.$axios.get('/user/reset', {
            params: {
              tel: this.ruleForm.tel,
              pwd: '123456'
            }
          }).then(response => {
            this.$message({
              message: '账号:' + this.ruleForm.tel + '[' + response.data.message + '] 密码重置为:123456',
              type: 'success'
            })
          }).catch(err => {
            console.log(err)
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 验证码验证
    checkVerify () {
      // checkVerify?verifyInput=4e4n
      this.$axios.post('/checkVerify', {
        params: {
          verifyInput: this.ruleForm.code
        }
      }).then(response => {
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
  }
}
</script>
<style scoped>
  #forget {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('~@/assets/img/temp/19.jpg') no-repeat center center;
    background-size: 100% 100%;
  }

  .main {
    padding: 30px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    width: 20%;
    /*height: 40%;*/
    background: white;
    border-radius: 4px;
  }

  .el-form-item {
    margin-bottom: 18px !important;
  }

  element.style {
    margin-left: 0px !important;
  }

  .link {
    display: flex;
    justify-content: flex-end;
    height: 25px;
  }

  .title {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .el-form-item__content {
    margin-left: 0px !important;
  }

  element.style {
    margin-left: 80px !important;
  }
</style>
